<template>
    <n-spin :show="uploading">
        <template #description>正在判题，请不要离开此页面</template>
        <n-space vertical justify="center" style=" margin-left: 2.5%;">
            <n-select
                v-model:value="lang"
                :options="options"
                placeholder="选择语言"
                style="width: 150px;"
                @update:value="updateLang"
            ></n-select>
            <Codemirror
            v-model:value="code"
            :options="cmOptions"
            border
            :height="400"
            style="width: 1150px;"></Codemirror>
            <n-button type="primary" @click="uploadAnswer">提交</n-button>
            <div style="height: 50px;"></div>
        </n-space>
    </n-spin>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { Codemirror } from 'codemirror-editor-vue3'
import { NSpin, useMessage } from "naive-ui";
import "codemirror-editor-vue3/dist/style.css";
import "codemirror/mode/clike/clike.js";
import "codemirror/mode/python/python.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/anyword-hint.js"

import { toUploadTest } from "@/utils/tests";
import { toGetQuestion } from '@/utils/Questions'

const options = [
    {
        label: 'C',
        value: 'text/x-csrc',
    },
    {
        label: 'C++',
        value: 'text/x-c++src',
    },
    {
        label: 'Python',
        value: 'text/x-python',
    },
    {
        label: 'Java',
        value: 'text/x-java',
    }
];

export default defineComponent({
    props: {
        questionid: {
            type: Number,
            required: true
        }
    },
    created(){
        this.setQuestionText();
    },
    components: { Codemirror, NSpin },
    setup(props){
        const code = ref('');
        console.log(props.questionid);
        const message = useMessage();
        return {
            message: message,
            uploading: ref(false),
            question_id: props.questionid,
            options: options,
            code: code,
            lang: ref(),
            cmOptions: ref({
                mode: "", // 语言模式
                theme: "default", // 主题
                lineNumbers: true, // 显示行号
                smartIndent: true, // 智能缩进
                indentUnit: 2, // 智能缩进单位为4个空格长度
                foldGutter: true, // 启用行槽中的代码折叠
                styleActiveLine: true, // 显示选中行的样式
            }),
        }
    },
    methods: {
        async uploadAnswer(){
            this.uploading = true;
            console.log(this.lang);
            console.log(this.code);
            const data = await toUploadTest({
                submit_time: Date.now(),
                question_id: this.question_id,
                language: this.lang,
                code: this.code
            });
            if (data)
            this.message.success(data.message);
            this.uploading = false;
            this.$router.push('/status');
        },
        async setQuestionText(){
            const data = await toGetQuestion(String(this.$route.params.questionName));
            if (data){
                this.question_id = data.question_id;
            }
        },
        updateLang(value: Array<any> | string | number | null, option: any){
            console.log(value);
            if (typeof(value) == 'string'){
                this.cmOptions.mode = value;
            }
        }
    }
})
</script>